<template>
  <div>
    <!-- Vant:导航栏 -->
    <van-nav-bar @click-left="$router.go(-1)" left-arrow title="商品详情" />
    <div>
       <img style="width:100vw;height:130px;" :src="imgHost+(goods?goods.img:'')" />
    </div>
    <p style="font-size:32px;font-weight:bold;color:red;">￥{{goods?goods.price:0}}</p>
    <div style="font-size:28px;font-weight:bold;" v-text="goods?goods.goodsname:''"></div>
    <!-- Vant:商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button @click="show=true" type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>    
     <!-- Vant:商品规格 -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :quota="quota"
      :message-config="messageConfig"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />    
  </div>
</template>

<script>
import { Notify } from 'vant';
import {getOneGoodsInfo,addCart,getCurUserId} from '../../request/api.js'
export default {
  data(){
    return {
      show:false,//是否显示商品规格信息
      quota:0,//限购数量,0表示不限购
      messageConfig:{},//留言配置
      goodsId:'',//商品id
      goods:{},  //商品数据
      sku:{  //商品规格数据
            // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
            // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
            tree: [
              {
                k: '颜色', // skuKeyName：规格类目名称
                k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                v: [
                  {
                    id: '1', // skuValueId：规格值 id
                    name: '红色', // skuValueName：规格值名称
                    imgUrl: 'https://img01.yzcdn.cn/1.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
                    previewImgUrl: 'https://img01.yzcdn.cn/1p.jpg', // 用于预览显示的规格类目图片
                  },
                  {
                    id: '1',
                    name: '蓝色',
                    imgUrl: 'https://img01.yzcdn.cn/2.jpg',
                    previewImgUrl: 'https://img01.yzcdn.cn/2p.jpg',
                  }
                ],
                largeImageMode: true, //  是否展示大图模式
              }
            ],
            // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
            list: [
              {
                id: 2259, // skuId
                s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
                s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
                price: 100, // 价格（单位分）
                stock_num: 110 // 当前 sku 组合对应的库存
              }
            ],
            price: '1.00', // 默认价格（单位元）
            stock_num: 227, // 商品总库存
            collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
            none_sku: false, // 是否无规格商品
            messages: [
              {
                // 商品留言
                datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
                multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
                name: '留言', // 留言名称
                type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
                required: '1', // 是否必填 '1' 表示必填
                placeholder: '', // 可选值，占位文本
                extraDesc: ''  // 可选值，附加描述文案
              }
            ],
            hide_stock: false // 是否隐藏剩余库存
          }
    }
  },
   methods:{
      onAddCartClicked(options){ //添加购物车
         //获取已登录的用户ID:
         let uid = getCurUserId('/goodsdetail');
  
         let obj = {
          uid,  //用户id
          goodsid:options.goodsId,  //商品id
          num:options.selectedNum,//商品数量 
         }

         //通过请求头将Token传到服务器
        //  let headerObj = {
        //   authorization:localStorage['userInfo']?JSON.parse(localStorage['userInfo']).token:''
        //  }
             let headerObj = {};

         //添加购物车
         addCart(obj,headerObj).then(d=>{
          console.log(d,'d.....');
              if(d.data.code == 200){  //添加成功
                  Notify({ type: 'success', message: '购物车添加成功！' });
              }else{  //添加失败
                  Notify({ type: 'danger', message: '购物车添加失败...' });
              }
         }).catch(e=>{
          console.log(e);
         })
      },
      onBuyClicked(){  //立即购买

      },
      getOneGoodsData(id){
          getOneGoodsInfo({id}).then(d=>{

               if(d.status == 200){
                this.goods=d.data.list[0];
               }
          }).catch(e=>{
            console.log(e);
          })
      }
   },
   mounted(){
     let {goodsid=''} = this.$route.params;
     this.goodsId = goodsid;
     if(goodsid != ''){
      //根据商品id查询商品数据：
      this.getOneGoodsData(goodsid);
     }
   }
}
</script>

<style>

</style>